<template>
	<el-dialog title="详细信息" v-model="isShowDialog" width="800px" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-row :gutter="20" v-for="(field,index) in fields">
			<el-col :span="4" style="text-align: right;" class="mb20">
				{{field}}
			</el-col>
			<el-col :span="20" class="mb20">
				<span>
					{{ruleForm[index]}}
				</span>
			</el-col>
		</el-row>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="onCancel">关 闭</el-button>
			</span>
		</template>
	</el-dialog>
</template>

<script lang="ts">
	import {
		reactive,
		toRefs,
		onMounted,
		ref,
	} from 'vue';
	export default {
		name: 'UserForm',
		setup() {

			const state = reactive({
				isShowDialog: false,
				ruleForm: {
					Amount: '',
					Members: '',
					Memo: '',
					OrderSN: '',
					Salesman: '',
				},
				fields: {
					Members: '会员',
					OrderSN: '订单号',
					Amount: '金额',
					Memo: '摘要信息',
					Salesman: '业务员',
				},
			});
			// 打开弹窗
			const openDialog = (model: Object, callback: Function) => {
				state.ruleForm = model;
				state.isShowDialog = true;
				state.callback = callback;
			};
			// 关闭弹窗
			const closeDialog = () => {
				state.isShowDialog = false;
			};
			// 取消
			const onCancel = () => {
				closeDialog();
			};

			// 页面加载时
			onMounted(() => {

			});

			return {
				openDialog,
				closeDialog,
				onCancel,

				...toRefs(state),
			};
		},
	};
</script>
